import React, {useRef, useState} from 'react';
import ProCard from '@ant-design/pro-card';
import ProForm, {
  BetaSchemaForm,
  ProFormColumnsType,
  ProFormDependency,
  ProFormDigit,
  ProFormGroup,
  ProFormInstance,
  ProFormList,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
} from '@ant-design/pro-form';
import {useDebounceFn, useMount, useRequest, useSetState} from 'ahooks';
import {findBySelectList} from '@/services/ant-design-pro/attribute';

const valueTypeArray = [
  'password',
  'money',
  'textarea',
  'option',
  'date',
  'dateWeek',
  'dateMonth',
  'dateQuarter',
  'dateYear',
  'dateRange',
  'dateTimeRange',
  'dateTime',
  'time',
  'timeRange',
  'text',
  'select',
  'checkbox',
  'rate',
  'radio',
  'radioButton',
  'index',
  'indexBorder',
  'progress',
  'percent',
  'digit',
  'second',
  'avatar',
  'code',
  'switch',
  'fromNow',
  'image',
  'jsonCode',
];

const valueEnum = {
  all: {text: '全部', status: 'Default'},
  open: {
    text: '未解决',
    status: 'Error',
  },
  closed: {
    text: '已解决',
    status: 'Success',
    disabled: true,
  },
  processing: {
    text: '解决中',
    status: 'Processing',
  },
};
type DataItem = {
  name: string;
  state: string;
};
const columnRles = [
  {
    required: true,
    message: '不能为空',
    label: '不能为空',
    value: 0,
  },
  {
    pattern: /^1\d{10}$/,
    message: '手机号格式错误！',
    label: '手机号格式错误',
    value: 1,
  },
];

const columns: ProFormColumnsType<DataItem>[] = [
  {
    title: '标题',
    dataIndex: 'title',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '此项为必填项',
        },
      ],
    },
  },
  {
    title: '状态',
    dataIndex: 'state',
    valueType: 'select',
    valueEnum,
  },
];

const initialValues = {
  title: '高级定义列表',
  column: '2',
  columns,
};

export default () => {
  const ref = useRef<ProFormInstance> ();
  const {
    run: fetchfindBySelectList,
    data: dataAttr,
    loading: loadingAttr,
  } = useRequest ( findBySelectList, {
    debounceWait: 100,
    manual: true,
  } );
  const [values, setValues] = useState<Record<string, any>> ( initialValues );
  const [config, setConfig] = useSetState<any> ( initialValues );
  /** 去抖配置 */
  const updateConfig = useDebounceFn ( async (state) => {
    console.log ( state );

    setValues ( state );
    const columnsa = state.columns;
    state.columns = columnsa.filter ( (column: any) => {
      return column != undefined;
    } );
    // state.columns=columnsa;
    console.log ( state );
    setConfig ( state );
  } );
  useMount ( () => {
    fetchfindBySelectList ();
  } );
  return (
    <ProCard
      bordered
      split="vertical"
      headerBordered
      style={{
        height: 500,
      }}
    >
      <ProCard colSpan="calc(100% - 500px)">
        <BetaSchemaForm<DataItem> shouldUpdate={true} layoutType="Form" columns={config.columns}/>
      </ProCard>
      <ProForm
        formRef={ref}
        initialValues={values}
        onValuesChange={(_, allValue) => {
          console.log ( allValue );
          //  setValues({...initialValues, ...allValue});
          updateConfig.run ( {...initialValues, ...allValue} );
        }}
        submitter={false}
      >
        <ProCard
          colSpan="500px"
          title="配置菜单"
          tabs={{}}
          style={{
            width: 500,
          }}
        >
          <ProCard.TabPane tab="基本配置" key="base">
            <ProFormText label="标题" name="title"/>
            <ProForm.Group>
              <ProFormSelect
                name="layout"
                label="布局"
                initialValue="horizontal"
                options={[
                  {
                    label: '水平',
                    value: 'horizontal',
                  },
                  {
                    label: '垂直',
                    value: 'vertical',
                  },
                ]}
              />
              <ProFormSwitch label="加载中" tooltip="loading" name="loading"/>
              <ProFormSelect
                name="size"
                label="尺寸"
                initialValue="default"
                options={[
                  {
                    label: '大',
                    value: 'default',
                  },
                  {
                    label: '中',
                    value: 'middle',
                  },
                  {
                    label: '小',
                    value: 'small',
                  },
                ]}
              />

              <ProFormSwitch label="边框" tooltip="bordered" name="bordered"/>
              <ProFormDigit width="xs" label="列数" name="column"/>
            </ProForm.Group>
          </ProCard.TabPane>
          <ProCard.TabPane tab="列配置" key="columns">
            <ProFormList
              name="columns"
              initialValue={values.columns}
              label="列配置"
              itemRender={({listDom, action}) => {
                return (
                  <ProCard
                    bordered
                    style={{
                      marginBottom: 8,
                      position: 'relative',
                    }}
                  >
                    <div
                      style={{
                        position: 'absolute',
                        top: -2,
                        right: 4,
                      }}
                    >
                      {action}
                    </div>
                    {listDom}
                  </ProCard>
                );
              }}
            >
              <ProForm.Group key="Group">
                <ProFormText
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                  name="title"
                  label="标题"
                />

                <ProFormGroup
                  style={{
                    marginTop: 8,
                  }}
                  size={8}
                >
                  <ProFormSelect
                    label="dataIndex"
                    width="xs"
                    name="dataIndex"
                    valueEnum={valueEnum}
                  />
                  <ProFormSelect
                    width="xs"
                    label="值类型"
                    name="valueType"
                    fieldProps={{
                      onChange: () => {
                        ref.current?.resetFields ();
                      },
                    }}
                    options={valueTypeArray.map ( (value) => ({
                      label: value,
                      value,
                    }) )}
                  />
                </ProFormGroup>
                <ProFormGroup
                  style={{
                    marginTop: 8,
                  }}
                  size={8}
                >
                  <ProFormText width="xs" label="列提示" name="tooltip"/>
                </ProFormGroup>
                <ProFormDependency name={['valueType', 'valueEnum']}>
                  {({valueType, valueEnum}) => {
                    if (valueType == 'select') {
                      return (
                        <ProFormSelect
                          formItemProps={{
                            style: {
                              marginTop: 8,
                            },
                          }}
                          onChange={() => {
                          }}
                          options={dataAttr?.data}
                          label="数据枚举"
                          name="attribute"
                        />
                      );
                    } else if (
                      valueType == 'text' ||
                      valueType == 'textarea' ||
                      valueType == undefined
                    ) {
                      return (
                        <ProFormSelect
                          formItemProps={{
                            style: {
                              marginTop: 8,
                            },
                          }}
                          onChange={(e: any, e1: any) => {
                            console.log ( e, e1 );
                          }}
                          options={columnRles}
                          label="数据枚举"
                          name="role"
                        />
                      );
                    }
                  }}
                </ProFormDependency>
              </ProForm.Group>
            </ProFormList>
          </ProCard.TabPane>
        </ProCard>
      </ProForm>
    </ProCard>
  );
};
